<template>
	<view class="content">
		<view v-for="(item, index) in goosList" class="evaluate-item" :key="index">
			<view class="head-wrap">
				<image :src="$util.img(item.picture_info.pic_cover_micro)" mode="widthFix" class="goos-img"></image>
				<view>{{ item.goods_name }}</view>
			</view>
			<view class="clearfix" v-if="!again">
				<text class="ns-text-color-gray ns-font-size-sm">描述相符</text>
				<view class="example-body">
					<uni-rate :value="goodsEvaluate[index].scores" :size="18" :index="index" color="#898989" active-color="#ff0036" @change="rateChange" />
				</view>
			</view>
			<view class="body-wrap"><textarea class="ns-bg-color-gray ns-font-size-base" v-model="goodsEvaluate[index].content" placeholder="您的评价可以帮助其他人哦~" /></view>
			<view class="img-box">
				<view class="img-list" v-for="(items, indexs) in uploadArr[index]" :key="indexs">
					<view class="close-btn iconfont icondelete_light" @click="deleteImg(indexs, index)"></view>
					<image :src="$util.img(items)" @tap="preview(uploadArr[index], indexs)" mode="aspectFit"></image>
				</view>
				<view class="add-img" @click="addImg(index)" v-if="uploadArr[index].length < 6">
					<text class="iconfont iconxiangji"></text>
					<text class="ns-text-color-gray ">{{ acountOld - uploadArr[index].length }}/{{ acount }}</text>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="footer">
			<view class="left_icon" v-if="!again">
				<checkbox-group @change="checkChange">
					<label class="checkbox">
						<checkbox :value="isAnonymous" />
						是否匿名
					</label>
				</checkbox-group>
			</view>
			<view v-else></view>
			<button class="sub_btn" type="primary" @click="subFrom">发表</button>
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	components: {
		uniRate
	},
	data() {
		return {
			acountOld: 6,
			acount: 6,
			orderId: '',
			orderNo: '',
			again: false,
			isAnonymous: '1',
			goosList: '',
			goodsEvaluate: [],
			uploadArr: [[]],
			flag: false
		};
	},
	onLoad(e) {
		this.orderId = e.order_id;
		if (e.again == 0 || e.again == undefined) {
			this.again = false;
		} else {
			this.again = true;
		}
		this.getEvaluateList();
	},
	mixins: [http],
	methods: {
		getEvaluateList() {
			this.sendRequest({
				url: !this.again ? 'System.Order.evaluationDetail' : 'System.Order.reviewEvaluateDetail',
				data: {
					order_id: this.orderId
				},
				success: res => {
					
					console.log("res=====================",res)
					if (res.code == 0) {
						let list = res.data.list;
						this.goosList = list;
						this.orderNo = res.data.order_no;
						for (let i = 0; i < list.length; i++) {
							this.goodsEvaluate.push({
								content: '', // 评价内容
								scores: 5, // 评分
								explain_type: 1, // 评价类型
								imgs: '',
								order_goods_id: list[i].order_goods_id // 订单项id
							});
						}
					}
				}
			});
		},
		subFrom() {
			let that = this;
			for (let i = 0; i < this.goosList.length; i++) {
				if (this.goodsEvaluate[i].content == '') {
					this.$util.showToast({
						title: '请输入评价'
					});
					return false;
				}
			}
			if (this.flag) return;
			this.flag = true;
			this.sendRequest({
				url: !this.again ? 'System.Order.addGoodsEvaluate' : 'System.Order.addGoodsReviewEvaluate',
				data: {
					goods_evaluate: JSON.stringify(this.goodsEvaluate),
					order_id: this.orderId,
					order_no: this.orderNo
				},
				success: res => {
					if (res.data == 1) {
						this.$util.showToast({
							title: '评价成功',
							success: function() {
								that.$util.redirectTo('/pages/order/list/list', {}, '', 'redirectTo');
							}
						});
					} else {
						this.$util.showToast({
							title: res.message
						});
						this.flag = false;
					}
				}
			});
		},
		deleteImg(i, j) {
			this.uploadArr[j].splice(i, 1);
			this.goodsEvaluate[j].imgs = this.uploadArr[j].join(',');
		},
		preview(arr, i) {
			uni.previewImage({
				urls: arr,
				current: i
			});
		},
		rateChange(i) {
			this.goodsEvaluate[i.index].scores = i.value;
			if (!this.again) {
				if (i.value == 1) {
					var explain_type = 3;
				}
				if (i.value > 1 && i.value < 4) {
					var explain_type = 2;
				}
				if (i.value > 3 && i.value < 6) {
					var explain_type = 1;
				}
				this.goodsEvaluate[i.index].explain_type = explain_type;
			}
		},
		checkChange(e) {
			if (!this.again) {
				if (e.detail.value[0]) {
					for (let i = 0; i < this.goosList.length; i++) {
						this.goodsEvaluate[i].is_anonymous = Number(e.detail.value[0]);
					}
				} else {
					for (let i = 0; i < this.goosList.length; i++) {
						this.goodsEvaluate[i].is_anonymous = 0;
					}
				}
			}
		},
		addImg(index) {
			this.$util.upload(6, { file_path: 'wap_member' }, res => {
				let arr = this.uploadArr[index];
				if (res.length + arr.length > 6) {
					this.$util.showToast({
						title: '亲，最多6张呦'
					});
					arr = arr.concat(res);
					arr.splice(6, arr.length - 6);
				} else {
					arr = arr.concat(res);
				}
				this.uploadArr[index] = []; //清空
				for (var i = 0; i < arr.length; i++) {
					this.uploadArr[index].push(arr[i]);
				}
				this.goodsEvaluate[index].imgs = this.uploadArr[index].join();
			});
		}
	}
};
</script>

<style lang="scss">
page{
	background: #fff;
}
.evaluate-item {
	padding: $ns-padding;
	.head-wrap {
		margin-bottom: $ns-margin;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.goos-img {
			width: 150rpx;
			margin-right: $ns-margin;
		}
	}
	.clearfix {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.example-body {
			margin-left: $ns-margin;
			.uni-rate {
				line-height: 0;
				font-size: 0;
				display: flex;
				flex-direction: row;

				&-icon {
					position: relative;
					line-height: 0;
					font-size: 0;
					display: inline-block;

					&-on {
						line-height: 1;
						position: absolute;
						top: 0;
						left: 0;
						overflow: hidden;
					}
				}
			}
		}
	}
	.body-wrap {
		textarea {
			background-color: lighten($ns-bg-color-gray, 5%) !important;
			width: 100%;
			box-sizing: border-box;
			margin: 0;
			padding: $ns-padding;
		}
	}
	.img-box {
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		.add-img {
			width: calc((92%-40rpx) / 3);
			height: 208rpx;
			border: 2rpx solid;
			border-color: $ns-border-color-gray;
			border-radius: $ns-border-radius;
			margin-top: $ns-margin;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			text {
				line-height: 1;
				color: $ns-text-color-gray;
			}
		}
		.img-list {
			position: relative;
			width: calc((92%-40rpx) / 3);
			height: 208rpx;
			border-radius: $ns-border-radius;
			margin-top: $ns-margin;
			margin-right: $ns-margin;
			.close-btn {
				position: absolute;
				right: 0;
				top: 0;
				font-size: $ns-font-size-lg + 10rpx;
				line-height: 1;
				width: 70rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				z-index: 1;
				background: #eeeeee;
			}
			image {
				width: 100%;
				height: 200rpx;
			}
		}
		.img-list:nth-child(3n + 3) {
			margin-right: 0;
		}
	}
}
.footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: $ns-padding;
	.sub_btn {
		width: 300rpx;
		height: 80rpx;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		margin: 0;
		border-radius: 0;
	}
	.left_icon {
		checkbox {
			transform: scale(0.7);
		}
	}
}
</style>
